import React, {useCallback, useState} from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';
import BasicText from './BasicText';
import { normalize } from '../../utils/adapter';

type Props = {
  width?: number;
};

function FoldText({width}: Props) {
  const [isShowFoldText, setisShowFoldText] = useState(false);
  const [isFold, setIsFold] = useState(true);

  const textLayoutChange = useCallback((isOverflow: boolean) => {
    setisShowFoldText(isOverflow);
  }, []);

  const openOrClose = useCallback(() => {
    setIsFold(!isFold);
  }, [isFold]);

  return (
    <View style={[styles.fold_view, {width: width ?? 'auto'}]}>
      <BasicText
        color="#D4D7DD"
        fontSize={normalize(12)}
        lineNumber={isFold ? 2 : 20}
        textLayoutChange={textLayoutChange}>
        第1集丨人人瞧不起李建华是个保安，没成想他隐藏自己的大佬身份
      </BasicText>
      {isShowFoldText && (
        <TouchableOpacity onPress={openOrClose}>
          <BasicText fontSize={normalize(12)}>展开</BasicText>
        </TouchableOpacity>
      )}
      {!isFold && (
        <TouchableOpacity onPress={openOrClose}>
          <BasicText fontSize={normalize(12)}>收起</BasicText>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  fold_view: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
});

export default FoldText;
